{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<div id="app" v-cloak>
    <div class="mian">
        <div id="map" style="width: 100%;height: 90vh"></div>
    </div>
</div>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=RzBUcYLlr0yjdDdwxgDTqk0C6hwfRCjw"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                single: {:json_encode($single)},
                map: "",
                marker: "",
                mapZoom: 16,
            }
        },
        mounted() {
            let self = this; 
            let point = new BMap.Point(self.single.longitude, self.single.latitude);
            // 创建Map实例
            self.map = new BMap.Map('map');
            // 开启鼠标滚轮缩放
            self.map.enableScrollWheelZoom(true);
            // 设置中心点坐标和地图级别
            self.map.centerAndZoom(point, self.mapZoom);
            let content = `
            <div style="line-height:20px;padding:2px">
                联系地址： ${self.single.address}<br/>
                联系电话： ${self.single.phone}<br/>
                联系人： ${self.single.nickname}
            </div>`;
            let searchInfoWindow = new BMapLib.SearchInfoWindow(self.map, content, {
                title: self.single.title,       // 标题 
                width: 300,                     // 宽度
                height: 105,                    // 高度
                panel: "panel",                 // 检索结果面板
                enableAutoPan: true,            // 自动平移
                searchTypes: [
                    BMAPLIB_TAB_SEARCH,         // 周边检索
                    BMAPLIB_TAB_TO_HERE,        // 到这里去
                    BMAPLIB_TAB_FROM_HERE       // 从这里出发
                ]
            }); 
            // 创建标注，为要查询的地方对应的经纬度
            self.marker = new BMap.Marker(point,{size: 50});
            // 创建标注
            self.map.addOverlay(self.marker);
            // 提示信息
            self.marker.addEventListener("click", function(e){
                searchInfoWindow.open(self.marker);
            });
            // 跳动的动画
            self.marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
        },
    })
</script>
{include file="common/footer"}